<template>
  <div v-if="hasNotice" class="notice-board">
    <div class="content">
      <p class="xui-font-size-md xui-text-center" style="font-weight:bolder">公 告</p>
      <div class="xui-font-size-sm">{{notice.vContent | filterHTML | truncate(90)}} <span @click="noticeDialogVisible = true" class="xui-margin-left color-red cursor-point" style="font-weight:bold">查看全部</span></div>
    </div>
    <!-- 公告提示框 -->
    <el-dialog
      title="公告"
      :visible.sync="noticeDialogVisible"
      width="800px">
      <div v-html="notice.vContent"></div>
    </el-dialog>
  </div>
</template>

<script>
import { getStudyNoticeList } from "@/api/detail";
import { filterHTMLTag } from "@/utils";
export default {
  data() {
    return {
      hasNotice: false,
      notice: {
        vContent: ""
      },
      noticeDialogVisible: false
    };
  },
  computed: {
    oneLevelRouteName() {
      return this.$route.matched[0].name;
    }
  },
  methods: {
    getStudyNotice() {
      getStudyNoticeList().then(res => {
        this.notice = res.data.recordsList[0];
        this.hasNotice = res.data.recordsList.length > 0 ? true : false;
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getStudyNotice();
    });
  },
  filters: {
    filterHTML(content) {
      return filterHTMLTag(content);
    }
  }
};
</script>

<style lang="less" scoped>
.notice-board {
  padding: 15px;
  background: #fff5ec;
  .content {
    padding: 10px;
    background: #f4dec9;
    color: #853f04;
  }
}
</style>
